{{ header }}
<div class="product-search">
  <div class="container">
    <form action="{{ search }}" method="get" class="search-form">
      <div class="row">
        <div class="col-md-6 col-sm-8 col-md-offset-3 col-sm-offset-2 form-group">
          <input type="text" name="keyword" value="{{ keyword }}" placeholder="{{ text_keyword }}" class="form-control input-lg input-keyword" />
        </div>
        <div class="col-md-3 col-sm-4 col-md-offset-3 col-sm-offset-2 form-group">
          <select name="category_id" class="form-control">
            <option value="0">{{ text_category }}</option>
            {% for category_1 in categories %}
            {% if category_1.category_id == category_id %}
            <option value="{{ category_1.category_id }}" selected="selected">{{ category_1.name }}</option>
            {% else %}
            <option value="{{ category_1.category_id }}">{{ category_1.name }}</option>
            {% endif %}
            {% for category_2 in category_1.children %}
            {% if category_2.category_id == category_id %}
            <option value="{{ category_2.category_id }}" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
            {% else %}
            <option value="{{ category_2.category_id }}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
            {% endif %}
            {% for category_3 in category_2.children %}
            {% if category_3.category_id == category_id %}
            <option value="{{ category_3.category_id }}" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}</option>
            {% else %}
            <option value="{{ category_3.category_id }}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}</option>
            {% endif %}
            {% endfor %}
            {% endfor %}
            {% endfor %}
          </select>
        </div>
        <div class="col-md-3 col-sm-4 form-group">
          <label class="checkbox-inline">
            {% if description %}
            <input type="checkbox" name="description" value="1" id="description" checked="checked" />
            {% else %}
            <input type="checkbox" name="description" value="1" id="description" />
            {% endif %}
            {{ entry_description }}
          </label>
          <input type="submit" value="{{ button_search }}" class="btn btn-primary pull-right button-search" />
        </div>
      </div>
    </form>
    {% if products %}
    <div class="product-filters clearfix">
      <div class="filter sort">
        <div class="name">{{ text_sort }}{{ colon }}</div>
        <div class="items">
          <a href="{{ sorts.default.href }}"{% if sorts.default.value == '%s-%s'|format(sort, order) %} class="active"{% endif %}><span>{{ text_default }}</span></a>
          <a href="{{ sorts.price_asc.href }}"{% if sorts.price_asc.value == '%s-%s'|format(sort, order) %} class="active"{% endif %} rel="nofollow"><span>{{ text_price_asc }}</span><i class="icon-arrow-thin-up"></i></a>
          <a href="{{ sorts.price_desc.href }}"{% if sorts.price_desc.value == '%s-%s'|format(sort, order) %} class="active"{% endif %} rel="nofollow"><span>{{ text_price_desc }}</span><i class="icon-arrow-thin-down"></i></a>
          <a href="{{ sorts.added_desc.href }}"{% if sorts.added_desc.value == '%s-%s'|format(sort, order) %} class="active"{% endif %} rel="nofollow"><span>{{ text_added_desc }}</span><i class="icon-arrow-thin-right"></i></a>
          <a href="{{ sorts.added_asc.href }}"{% if sorts.added_asc.value == '%s-%s'|format(sort, order) %} class="active"{% endif %} rel="nofollow"><span>{{ text_added_asc }}</span><i class="icon-arrow-thin-left"></i></a>
          {% if sorts.rating_desc %}<a href="{{ sorts.rating_desc.href }}"{% if sorts.rating_desc.value == '%s-%s'|format(sort, order) %} class="active"{% endif %} rel="nofollow"><span>{{ text_rating_desc }}</span><i class="icon-star"></i></a>{% endif %}
        </div>
      </div>
    </div>
    <div class="product-list row">
      {% for product in products %}
      <div class="product-wrap col-lg-3 col-md-3 col-sm-6 col-xs-6">
        <div class="product-item">
          <div class="product-img">
            <div class="image">
              <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a>
            </div>
            <div class="action">
              <button type="button" data-toggle="tooltip" title="{{ button_cart }}" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><i class="icon-cart"></i></button>
              <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="icon-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="icon-swap"></i></button>
            </div>
          </div>
          <div class="product-info">
            <h4 class="title"><a href="{{ product.href }}">{{ product.name }}</a></h4>
            {% if product.price %}
            <p class="price">
              {% if not product.special %}
              {{ product.price }}
              {% else %}
              <span class="price-new">{{ product.special }}</span>
              <span class="price-old">{{ product.price }}</span>
              {% endif %}
            </p>
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    <div class="row">
      <div class="col-md-3 col-sm-6 text-left"><div class="pagination-amount">{{ results }}</div></div>
      <div class="col-md-9 col-sm-6 text-right">{{ pagination }}</div>
    </div>
    {% endif %}
    {% if not products %}
    <div class="row">
      <div class="col-sm-12">
      <p class="no-data-box"><i class="icon-information"></i><span class="text">{{ text_empty }}</span></p>
    </div>
    </div>
    {% endif %}
  </div>
</div>
<script type="text/javascript"><!--
$('.search-form').on('submit', function(e) {
  e.preventDefault();

  var searchForm = $(this);

  var url = searchForm.attr('action');

  var keyword = $('input[name=\'keyword\']', searchForm).prop('value');

  if (keyword) {
    url += '&keyword=' + encodeURIComponent(keyword);
  }

  var category_id = $('select[name=\'category_id\']', searchForm).prop('value');

  if (category_id > 0) {
    url += '&category_id=' + encodeURIComponent(category_id);
  }

  var sub_category = $('input[name=\'sub_category\']:checked', searchForm).prop('value');

  if (sub_category) {
    url += '&sub_category=true';
  }

  var filter_description = $('input[name=\'description\']:checked', searchForm).prop('value');

  if (filter_description) {
    url += '&description=true';
  }

  location = url;
});

$('select[name=\'category_id\']').on('change', function() {
  var searchForm = $(this).parents('.search-form');

  if (this.value == '0') {
    $('input[name=\'sub_category\']', searchForm).prop('disabled', true);
  } else {
    $('input[name=\'sub_category\']', searchForm).prop('disabled', false);
  }
});

$('select[name=\'category_id\']').trigger('change');
--></script>
{{ footer }}